{% extends 'users/user-base.html' %}

{% load staticfiles %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/layui/css/modules/layer/skin/layer.css' %}">
    <style>
        body {
            position: relative;
            background-image: url('/static/images/login.jpg')!important;
            background-position: 0 0;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="login-box" style="margin: 7% 70%;">
        <div class="login-logo">
            <a href="#"><b>用注册邮箱重置密码</b></a>
        </div>
        <!-- /.login-logo -->
        <div class="login-box-body">
            <form action="{% url 'reset' %}" method="post" id="addForm">
                {% csrf_token %}

                {% if reset_form.non_field_errors %}
                    <div class="alert alert-danger" role="alert">
                        {% for error in reset_form.non_field_errors %}
                            <p{% if forloop.last %} class="mb-0"{% endif %}>{{ error }}</p>
                        {% endfor %}
                    </div>
                {% endif %}

                <div class="form-group has-feedback">
                    <input type="email" name="email" id="email" class="form-control" placeholder="请输入注册邮箱">
                    {#                    <span class="glyphicon glyphicon-user form-control-feedback"></span>#}
                    <span class="form-text text-muted">{{ reset_form.errors.email.0 }}</span>
                </div>

                <div class="input-group has-feedback" style="margin-bottom: 16px;">
                    <input id="email_code" type="text" name="code" class="form-control" placeholder="邮箱验证码">

                    <div class="input-group-btn">
                        <button id="send_code" type="button" class="btn btn-primary btn-flat">发送验证码</button>
                    </div>
                </div>
                <div class="form-group has-feedback">
                    <input type="password" name="password" class="form-control" placeholder="新密码">
                    {#                    <span class="glyphicon glyphicon-user form-control-feedback"></span>#}
                    <span class="form-text text-muted">{{ reset_form.errors.password.0 }}</span>
                </div>

                <div class="form-group has-feedback">
                    <input type="password" name="confirm_password" class="form-control" placeholder="确认密码">
                    {#                    <span class="glyphicon glyphicon-user form-control-feedback"></span>#}
                    <span class="form-text text-muted">{{ reset_form.errors.confirm_password.0 }}</span>
                </div>


                <div class="row" style="margin-top: 20px;">
                    <!-- /.col -->
                    <div class="col-xs-4 pull-right">
                        <button type="button" class="btn btn-primary pull-right btn-block btn-flat" id="confirm">确认
                        </button>
                    </div>
                    <!-- /.col -->
                </div>
            </form>

            <div class="social-auth-links">
                <a href="{% url 'login' %}">登陆</a><br>
            </div>

        </div>
        <!-- /.login-box-body -->
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'plugins/layui/css/modules/layer/layer.js' %}"></script>

    <script>
        $("#send_code").click(function () {
            $(this).attr("disabled", true);
            send_email($(this));
        });

        var wait = 60;

        function time(o) {
            if (wait === 0) {
                o.removeAttr('disabled');
                o.text('发送验证码');
                wait = 60;
            } else {
                o.attr('disabled', true);
                o.text(wait + ' s 后重新发送');
                wait--;
                setTimeout(function () {
                    time(o)
                }, 1000)
            }
        }

        // 发送邮箱验证码
        function send_email(that) {
            var email = $('#email').val();
            $.ajax({
                url: ['{% url 'email' %}' + '?email=' + email],
                type: 'get',
                success: function (resp) {
                    if (resp.code === 0) {
                        layer.alert(resp.msg, {icon: 1});
                        time($(that));
                    } else {
                        layer.alert(resp.msg, {icon: 5});
                        $('#send_code').attr('disabled', false);
                    }
                }
            })
        }

        $('#confirm').click(function () {
            var data = $("#addForm").serialize();
            var csrftoken = Cookies.get('csrftoken');
            $.ajax({
                url: {% url 'reset' %},
                type: $('#addForm').attr('method'),
                data: data,
                cache: false,
                headers: {
                    "X-CSRFToken": csrftoken
                },
                success: function (resp) {
                    if (resp.code === 0) {
                        layer.alert(resp.msg, {icon: 1});
                        window.location.href = {% url 'login' %};
                    } else {
                        layer.alert(resp.msg, {icon: 5}, function (index) {
                            parent.layer.closeAll(); // 关闭所有弹窗
                            window.location.reload();
                        });
                    }
                }
            })
        })
    </script>
{% endblock %}